<!DOCTYPE html>
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Cache-Control"  content="no-transform">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>${dbProduct.name}</title>
    <link href="/statics/view/css/yy_common.css" rel="stylesheet">
    <link href="/statics/view/css/yy_detail.css" rel="stylesheet">
    <link href="/statics/flickity/css/flickity.css" rel="stylesheet" type="text/css" media="screen" />
    <style type="text/css">
        .gallery-cell {
            width: 100%;
        }
    </style>
<body>
<div class="g-body">
    <div class="m-detail">
	<div class="m-simpleHeader" id="dvHeader">
	    <a href="javascript:void(0);" data-pro="back" data-back="true" class="m-simpleHeader-back"><i class="ico-back"></i></a>
	    <h1>商品详情</h1>
	</div>
        <div class="g-wrap">
            <div class="g-wrap-hd">
                <div class="w-slide m-detail-show" id="pro-view-1">
                    <div class="w-slide-wrap">
                         <ul class="w-slide-wrap-list" data-pro="list" style="width: 500%;">
                            <li data-pro="item" class="w-slide-wrap-list-item selected">
                                 <img src="${dbProduct.large}">
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="w-goods w-goods-xxl m-detail-goods">
                    <div class="w-goods-info">
                        <p class="w-goods-title">${dbProduct.name}</p>
                        <p class="w-goods-period">期号：${dbTimes.timesNo}</p>
                        <div class="w-progressBar" data-sum="${dbTimes.quantity}">
                            <p class="wrap">
                                <span class="bar" style="width:${(dbTimes.currentQuantity*100/dbTimes.quantity)?string("0.##")}%;"><i class="color"></i></span>
                            </p>
                            <ul class="txt">
                                <li class="txt-l"><p>总需${dbTimes.quantity}人次</p></li>
                                <li class="txt-r"><p>剩余<b class="txt-blue">${dbTimes.quantity-dbTimes.currentQuantity}</b></p></li>
                            </ul>
                        </div>
                    </div>
                </div>
                [#-- 当期中奖信息--]
                [#if dbTimes.isLottery]
                    <div class="m-detail-goods-result">
                        <div class="w-record">
                            <i class="ico ico-label ico-label-winner"></i>
                            <div class="w-record-detail" style="margin-left: 20px;">
                                <p class="f-breakword">获奖者：<a href="">${dbTimes.dbOrder.mobileInfo}</a></p>
                                <p>用户参与：${dbTimes.dbOrder.quantity}人次　<a class="m-detail-userCodes-viewWinnerCodesBtn showMyCode" data-content="${dbTimes.dbOrder.codeInfo}" href="javascript:void(0)">查看他的号码</a></p>
                                <p>揭晓时间：${dbTimes.endDate?string("yyyy-MM-dd HH:mm:ss")}</p>
                            </div>
                        </div>
                        <p class="m-detail-goods-result-luckyCode">幸运号码：<b>${dbTimes.timesCode}</b><a class="resultBtn w-button w-button-simple w-button-simple-white" href="/db/calc-${dbProduct.id}-${dbTimes.timesNo}">查看计算详情</a></p>
                    </div>
                [/#if]
                [#-- 如果用户已经参与了--]
                <div class="m-detail-userCodes" id="mem-orders"></div>
                <div class="m-detail-userCodes" id="mem-data-none" style="display: none;"><p>您尚未参加本期夺宝~</p></div>
                <div class="m-detail-userCodes" id="mem-data-login" style="display: none;">
                    <p class="m-detail-userCodes-blank"><a href="/login?redirectUrl=/dbs/product-${dbProduct.id}-${dbTimes.timesNo}.html"><b>请登录</b></a>，查看你的夺宝号码！</p>
                </div>
            </div>
            <div class="g-wrap-bd">
                <div class="m-detail-more">
                    <a href="/db/product-detail-${dbProduct.id}" class="w-bar">图文详情 <span class="w-bar-hint">( 建议在wifi下查看 )</span><span class="w-bar-ext"><b class="ico-next"></b></span></a>
                    <a href="/db/product-allRecord-${dbProduct.id}" class="w-bar">往期揭晓<span class="w-bar-ext"><b class="ico-next"></b></span></a>
                    <a href="" class="w-bar">晒单分享<span class="w-bar-ext"><b class="ico-next"></b></span></a>
                </div>
                <div class="m-detail-record">
                    <div class="w-bar">所有参与记录 <span class="w-bar-hint">
                        [#if dbTimes.createDate??](自${dbTimes.createDate?string("yyyy-MM-dd HH:mm")}开始)[/#if]
                    </span></div>
                    <div class="m-detail-record-wrap">
                        <div class="w-loading" afmoldstyle="block" style="display: none;">
                            <img style="display:inline;vertical-align:middle" width="20" height="20" src="/upload/loading.gif"> 正在努力加载中……
                        </div>
                    <div id="pro-view-4">
                        <ul class="m-detail-record-list" data-pro="entry">
                            <li id="orderList"></li>

                                移动端新闻3</div>
                        </ul>
                    </div>
                    </div>
                </div>
            </div>
        </div>
        [#if !dbTimes.isOver]
                    <div class="m-simpleFooter m-detail-buy">
                        <div data-pro="text" class="m-simpleFooter-text" style="text-align:center">
                            <a id="quickBuy" class="w-button w-button-main" href="/db/cart/list?tNo=${dbTimes.timesNo}&pid=${dbProduct.id}&num=${dbTimes.stepNum}">立即参与</a>
                        </div>
                        <div data-pro="ext" class="m-simpleFooter-ext"></div>
                    </div>
            [#else]
        <div class="m-simpleFooter m-detail-go" style="display: block;">
            <div data-pro="text" class="m-simpleFooter-text">
                <span class="m-detail-go-period">最新一期</span>正在火热进行...
            </div>
            <div data-pro="ext" class="m-simpleFooter-ext">
                <a class="w-button w-button-main m-detail-go-link" href="/dbs/index.html">立即前往</a>
            </div>
        </div>
        [/#if]
    </div>
</div>
<script src="//cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
<script src="/statics/view/js/db.js"></script>
<script type="text/javascript">
    $(function(){
        $(".showMyCode").click(function(){
            var data=$(this).attr("data-content");
            alert(data);
        });
    });
</script>
<script type="text/javascript">

    function loadCQ(){
        $.ajax({
            url: "/db/times-cq",
            type: "GET",
            data: {
                q: "${dbTimes.id}"
            },
            dataType: "json",
            cache: false,
            success: function(data) {
                var $dom=$(".w-progressBar");
                var dataSum=$dom.attr("data-sum");
                [#if dbTimes.isLottery]
                    var current=dataSum;[#else]var current=data.content;
                [/#if]
                var progressData=((current*100)/dataSum).toFixed(2);
                $dom.find(".bar").css("width",progressData+"%");
                $dom.find(".txt-blue").html((dataSum-current)+"人次");
            },error:function(){}
        });
    }

    function loadOrder(){
        $.ajax({
            url: "/db/times-data",
            type: "GET",
            data: {
                timesNo: "${dbTimes.timesNo}"
            },
            dataType: "json",
            cache: false,
            success: function(data) {
                $(data.order).each(function(index,element){
                    var o=data.order[index];
                    var html=' <div class="f-clear" style="padding-bottom: 8px;">'+
                            '<div class="text">'+
                            '<p class="f-breakword"><a href="" style="color: #0079fe;">'+ o.mobileInfo+'</a></p>'+
                            ' <p><span class="num">参与了<span class="txt-red">'+ o.quantity+'</span>人次</span>'+ o.dateInfo+'</p>'+
                            '</div>'+
                            '</div>';
                    $(html).appendTo("#orderList");
                });
                if(data.myOrder==null){
                    $("#mem-data-login").css("display","block");
                }else{
                    if(data.myOrder.length>0){
                        $(data.myOrder).each(function(index,element){
                            var o=data.myOrder[index];
                            var myOrdersHtml=' <div class="m-detail-userCodes">'+
                                    '<p>您参与了：<span class="txt-red">'+ o.quantity+'</span>人次 '+ o.dateInfo+'</p>'+
                                    '<p class="codes">夺宝号码：'+ o.codeInfo+'</p>'+
                                    '</div>';
                            $(myOrdersHtml).appendTo("#mem-orders");
                        });
                    }else{
                        $("#mem-data-none").css("display","block");
                }
                }
            },error:function(){}
        });
    }
    loadCQ();
    loadOrder();

</script>
<div class="cnzz" style="display: none;">
    <script src="http://s4.cnzz.com/z_stat.php?id=1259390685&web_id=1259390685" language="JavaScript"></script>
</div>
</body>
</html>